<template>
  <el-row id="company-container">
    <el-row v-if="!isViewShow" class="permission">
       没有权限!
    </el-row>
    <el-row v-else class="main-view">
      <!--left-->
      <el-col class="left-view">
        <el-row class="left-1">
          <img :src="picUrl" :onerror="errorImg">
        </el-row>
        <el-row class="left-2">
          <h2>{{companyInfo.name}}</h2>
          <p>{{companyInfo.province + companyInfo.city + companyInfo.country}}</p>
          <p>
            <span>固定电话：
              <em>{{companyInfo.telephone}}</em>
            </span>
            <span>法定人：<em>{{companyInfo.legalPerson}}</em></span>
          </p>
          <p>
            <span>电子邮箱：<em>{{companyInfo.emailAddress}}</em></span>
          </p>
        </el-row>
        <el-row class="left-3">
          <el-row class="left_weather">
            <el-col :span="16">
              <el-row>
                <span class="current-temp color-white">{{weatherInfo.temperature}} ℃</span>
              </el-row>
              <el-row>
                <span class="up-temp color-white">{{weatherInfo.weather}}</span>
                <span class="down-temp color-white">风向: {{weatherInfo.windDirection}}</span>
                <span class="down-temp color-white">风力:-</span>
              </el-row>
            </el-col>
            <el-col :span="8"><span class="color-white">湿度: {{weatherInfo.humidity}}</span></el-col>
          </el-row>
        </el-row>
      </el-col>

      <!--right-->
      <el-col class="right-view">

        <el-row class="month-report">
          <el-row class="tittle-layout">
            <el-col :span="22"><span>当月上报数据统计</span></el-col>
            <el-col :span="2">
              <el-button type="primary" :loading="false" @click="openDialog(1)">详情</el-button>
            </el-col>
          </el-row>
          <el-row>
            <base-hight-charts ref="companyBarChart" :id="'companyBarChart'" :option="dataVBarChartOptions" :time="timeTemp"/>
          </el-row>
        </el-row>

        <el-row class="day-report">
          <el-row class="tittle-layout">
            <el-col :span="22"><span>当日上报数据统计</span></el-col>
            <el-col :span="2">
              <el-button type="primary" :loading="false" @click="openDialog(2)">详情</el-button>
            </el-col>
          </el-row>
          <el-row>
            <base-hight-charts ref="companyBarChart" :id="'companyBarChart2'" :option="dataVBarChartOptions" :time="timeTemp"/>
          </el-row>
        </el-row>

      </el-col>
    </el-row>
    <!--弹窗-->
    <el-dialog title="详情" :visible.sync="dialogShow">

      <el-row>
        <el-select v-model="selectCurrentValue" placeholder="请选择">
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-row>

      <el-row>
        <BaseEchartsComponent ref="companyBarChart3" :id="'companyBarChart3'" :data="barChartsOptions3" />
      </el-row>

    </el-dialog>
  </el-row>

</template>

<script>
  import BaseHightCharts from '../../components/BaseHightChars/index'
  import myHightOptions from '../../chart-options/options'
  import BaseEchartsComponent from '../../components/BaseEcharts/index'
  import myEchartsOptions from '../../chart-options/echartsOptions'
  import {lazyAMapApiLoaderInstance} from 'vue-amap';
  import store from '@/store'

  export default {
    name: "index",
    components: {BaseHightCharts,BaseEchartsComponent},
    data() {
      return {
        isViewShow: false,
        isViewEdit: false,
        dialogShow: false,
        selectCurrentValue: '电',
        selectOptions:[{
          value: '选项1',
          label: '电'
        },{
          value: '选项2',
          label: '天然气'
        },{
          value: '选项3',
          label: '煤炭'
        }],
        barChartsOptions3: myEchartsOptions.barChartsOptions,
        errorImg: 'this.src="' + require('../../assets/dashboard_images/build.jpg') + '"',
        timeTemp: '',
        picUrl: '',
        companyInfo: {
          name: '',
          province: '',
          city: '',
          country: '',
          telephone: '',
          emailAddress: '',
        },
        dataVBarChartOptions: myHightOptions.bar3d,
        weatherInfo: {
          adcode: '__',
          city: '__',
          humidity: '__',
          info: '__',
          province: '__',
          reportTime: '__',
          temperature: 0,
          weather: '__',
          windDirection: '__',
          windPower: '__'
        }
      }
    },
    created() {
      this.$emit('fixHeadIndex', "1")
    },
    mounted() {
      let _that = this
      let obj = this.validateGlobal.getPermission(1)
      this.isViewShow = obj.isViewShow
      this.isViewEdit = obj.isViewEdit

      let options3d = { enabled: true, alpha: 0, beta: 0, depth: 50, viewDistance: 50}
      this.dataVBarChartOptions.chart.options3d = options3d

      this.dataVBarChartOptions.chart.spacingBottom = 60
      this.dataVBarChartOptions.chart.spacingLeft = 20
      this.dataVBarChartOptions.chart.spacingTop = 20
      this.dataVBarChartOptions.chart.spacingRight = 20
      this.dataVBarChartOptions.xAxis[0].categories = ['电','煤炭','天然气']
      this.dataVBarChartOptions.series[0].data = [100,80,30]
      this.timeTemp = new Date().getTime()

      this.barChartsOptions3.xAxis[0].axisLabel.textStyle.color = '#000'
      this.barChartsOptions3.yAxis[0].axisLabel.textStyle.color = '#000'
      // this.$refs.companyBarChart3.drawLineGraph('companyBarChart3',this.barChartsOptions3)
    /*  this.$nextTick(()=>{
        _that.$refs.companyBarChart3.drawLineGraph('companyBarChart3',_that.barChartsOptions3)
      })*/

      this.askCompanyInfoDatas()
      this.askWeatherDatas()
    },
    methods:{
      openDialog(type){
        this.dialogShow = true
      },
      doDatas(datas){
        let _that = this
        if (!this.validateGlobal.isEmpty(datas.alarms)){
          let [dataX,dataY] = [[],[]]
          for (let i = 0; i < datas.alarms.length; i++) {
            dataX[i] = datas.alarms[i].category
            dataY[i] = datas.alarms[i].alarmNum
          }
          this.dataVBarChartOptions.xAxis[0].categories = dataX
          this.dataVBarChartOptions.series[0].data = dataY
          this.timeTemp = new Date().getTime()
        }
      },
      askCompanyInfoDatas(){
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.company.info
        let askData = {
          userId: userId
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.companyInfo.name = res.data.name
            _that.companyInfo.telephone = res.data.legalTelephone
            _that.companyInfo.emailAddress = res.data.emailAddress
            _that.companyInfo.province = res.data.province
            _that.companyInfo.city = res.data.city
            _that.companyInfo.country = res.data.country
          }else{
            _that.$message('error!');
          }

        })
      },
      askWeatherDatas(){
        let _that = this
        lazyAMapApiLoaderInstance.load().then(() => {
          let citysearch = new AMap.CitySearch(); // 定位
          citysearch.getLocalCity(function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.city && result.bounds) {
                let cityinfo = result.city;
                console.log(cityinfo)
                let weather = new AMap.Weather(); // 天气
                weather.getLive(cityinfo, function (err, data) {
                  if (data) {
                    _that.weatherInfo = data
                    console.log(err, data.weather)
                  }
                });
              }
            }
          })
        })
      }
    }
  }
</script>

<style lang="less">
  #company-container {
    .main-view {
      margin: 20px 20px 0px 20px
    }

    .left-view {
      /*border: red solid 1px;*/
      width: 400px;
      max-width: 400px;

      .left-1 {
      }

      .left-2 {
        height: 160px;
        padding: 20px 0 0 20px;
        background-color: #000;

        h2 {
          font-size: 30px;
          color: #fff;
          margin-bottom: 10px;
          cursor: pointer
        }

        p {
          color: #9fa0a2;
          line-height: 33px;
        }

        p:nth-child(3) > :first-child {
          margin-right: 10px;
        }

        p:nth-child(3) > :last-child {
          border-left: #444 solid 1px;
          padding-left: 20px;
          margin-left: 20px;
        }
      }

      .left-3 {
        height: 306px;
        padding: 0 15px;
        background-color: #333;

        .left_weather {
          border-bottom: #444 solid 1px;
          margin: 20px 0px 0px 0px;
          padding-bottom: 20px;
          padding-top: 10px;
          height: 90px;
          overflow: hidden;

          > :first-child > .el-row {
            height: 35px;
          }

          > :last-child {
            border-left: #444 solid 1px;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
          }

          .current-temp {
            font-size: 30px;
            margin-bottom: 20px;
          }

          .up-temp {
            font-size: 18px;
            margin-top: 10px;
          }

          .down-temp {
            font-size: 18px;
            margin-left: 20px;
            margin-top: 10px;
          }
        }

        .indoorParam {

        }
      }
    }

    .right-view {
      width: 1440px;
      max-width: 1440px;
      /*border: red solid 1px;*/
      margin-left: 20px;
      /*background: #1b1c1f;*/

      .tittle-layout{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        margin-left: 10px;

        :first-child span{
          font-size: 30px;
          font-weight: bold;
          color: white;
        }

      }

      > :first-child.el-row {
        width: 100%;
        height: 400px;
        /*border: red 1px solid;*/
      }

      > :last-child.el-row {
        width: 100%;
        height: 400px;
        /*border: red 1px solid;*/
        margin-top: 20px;
      }

      .month-report {
        background: #000;
        /*border: 1px solid red;*/

        #companyBarChart {
          width: 100%;
          height: 100%;
        }

        .digital {
          height: 70px;
          width: 280px;
        }

      }

      .day-report {
        background: #000;

       /* > :first-child.el-row {
          margin-top: 10px;
          margin-left: 10px;
          span {
            font-size: 30px;
            font-weight: bold;
            color: white;
          }
        }
        > .el-row:nth-child(2){
          height: 340px;
          margin-top: 20px;
          !*border: 1px solid red;*!
          justify-content: space-around;
          flex-wrap: wrap;
        }*/
      }

      .c-limit {
        height: 100%;
        background: #000;
        margin-left: 20px;
        > :first-child.el-row {
          margin-top: 10px;
          margin-left: 10px;
          span {
            font-size: 30px;
            font-weight: bold;
            color: white;
          }
        }

        > .el-row:nth-child(2){
          height: 240px;
          /*border: 1px solid red;*/
          margin-top: 10px;
        }

        > .el-row:nth-child(3){
          height: 90px;
          margin-top: 10px;
          justify-content: space-around;
          align-items: center;
          > .el-col{
            height: 100%;
            /*border: 1px solid green;*/
            background: #333333;
            .el-row{
              height: 50%;
              display: -webkit-flex;
              display: flex;
              justify-content: center;
              align-items: center;

              span{
                color: white;
                font-weight: bold;
                font-size: 20px;
              }
            }

          }
        }

        #companyLineChart{
          width: 100%;
          height: 100%;
        }
      }
    }

    .el-dialog{
      #companyBarChart3{
        height: 300px;
        width: 100%;
      }
    }

    .el-button{
      padding: 6px 20px;
    }

   .right-view .tittle-layout :last-child span {
      font-size: 20px;
      font-weight: bold;
      color: white;
    }

    .color-white{
      color: white;
    }

  }




</style>
